<!--
@props:
  defaultList  Array   默认展示的照片，组件内不会修改它
  uploadUrl    String  照片上传的地址
  uploadParam  Object  照片上传时附带的参数
  imageUrl     String  照片展示的地址
  deleteUrl    String  照片删除的地址
@event
  onClose      (Array) 组件销毁前最后保存的照片数组，用于记忆上传过的照片
-->
<template>
  <div>
    <!--正在上传或上传完的的照片列表-->
    <div class="photo-list" v-for="item of uploadList">
      <template v-if="item.status === 'finished'">
        <img :src="absoluteThumbnailUrl+'&path='+encodeURIComponent(item.path)">
        <div class="photo-list-cover">
          <Icon type="ios-eye-outline" @click.native="handleView(item.path)"></Icon>
          <Icon v-if="canOperate" type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
        </div>
      </template>
      <template v-else>
        <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
      </template>
    </div>
    <!--上传照片按钮-->
    <Upload
      v-if="canOperate"
      ref="upload"
      :action="absoluteUploadUrl"
      :data="requestParam"
      :show-upload-list="false"
      :default-file-list="defaultList"
      :on-success="handleSuccess"
      :format="['jpg', 'jpeg', 'png']"
      accept="image/*"
      :max-size="2048"
      :on-format-error="handleFormatError"
      :on-exceeded-size="handleExceededSize"
      style="display: inline-block;width: 58px;"
      multiple
      type="drag">
      <div style="width: 58px;height: 58px;line-height: 58px;">
        <Icon type="camera" size="20"></Icon>
      </div>
    </Upload>
    <Modal title="查看图片" width="50%" v-model="isDialogVisible">
      <img :src="absoluteImageUrl+'&path='+encodeURIComponent(currentPath)" style="width: 100%;">
    </Modal>
  </div>
</template>

<script>

  import {appendRequestParam, doDelete} from "../../assets/js/utils/RequestUtils";
  import {CONTEXT_PATH, getAuthorizedFunction} from "../../assets/js/global";
  import {ADD, DELETE} from "../../assets/js/enum/FunctionType";
  import {SUCCESS} from "../../assets/js/enum/RequestResult";

  export default {
    name:"PhotoWall",
    props:{
      //已经上传过的照片集合
      defaultList:Array,

      //照片上传的地址
      uploadUrl:{
        type:String,
        default:""
      },

      //照片上传的参数
      uploadParam:{
        type:Object,
        default() {
          return {}
        }
      },

      //图片预览地址
      imageUrl:{
        type:String,
        required:true
      },

      //缩略图地址
      thumbnailUrl:{
        type:String,
        required:true
      },

      //图片删除地址
      deleteUrl:{
        type:String,
        default:""
      },

      //照片是否可以操作
      canOperate:{
        type:Boolean,
        default:true
      }
    },
    data() {
      return {
        isDialogVisible:false,
        uploadList:[],
        currentPath:"",
      }
    },
    computed: {
      requestParam() {
        return {
          id:this.uploadParam.id,
          bridgeId:this.uploadParam.bridgeId,
          sideTypeId:this.uploadParam.sideTypeId,
          taskId:this.uploadParam.taskId,
          tokenId:localStorage.getItem("tokenId"),
          menuFunctionId:getAuthorizedFunction(this, ADD),
        }
      },
      absoluteImageUrl() {
        return appendRequestParam(CONTEXT_PATH + this.imageUrl, "tokenId", localStorage.getItem("tokenId"));
      },
      absoluteThumbnailUrl() {
        return appendRequestParam(CONTEXT_PATH + this.thumbnailUrl, "tokenId", localStorage.getItem("tokenId"));
      },
      absoluteUploadUrl() {
        return CONTEXT_PATH + this.uploadUrl;
      }
    },
    methods:{
      handleView(path) {
        this.currentPath = path;
        this.isDialogVisible = true;
      },
      handleRemove(photo) {
        this.$confirm("确定移除照片？", "提示", {
          confirmButtonText:"确定",
          cancelButtonText:"取消",
          type:"warning"
        }).then(()=>{
          doDelete(this.deleteUrl, {
            data:photo,
            menuFunctionId:getAuthorizedFunction(this, DELETE),
            component:this
          }).then(response=>{
            if(response.status === SUCCESS) this.uploadList.splice(this.uploadList.findIndex(item=>item.id === photo.id), 1);
            this.$message({message: response.message, type: response.status.toLowerCase()})
          });
        })
      },
      handleSuccess(response, file) {
        file.id = response.content.id;
        file.path = response.content.path;
      },
      handleFormatError(file) {
        this.$alert("文件格式不正确, 请上传jpg或png格式的照片", "提示");
      },
      handleExceededSize(file) {
        this.$alert("文件"+file.name+"太大，上传的照片不能超过2M", "提示");
      },
      encodeURIComponent
    },
    beforeDestroy() {
      this.$emit("onClose", this.uploadList);
    },
    mounted () {
      if(this.$refs["upload"]) {
        this.uploadList = this.$refs["upload"].fileList;
      } else {
        this.uploadList = this.defaultList;
        this.uploadList.forEach(item=>item.status="finished");
      }
    }
  }
</script>

<style scoped>
  .photo-list {
    display: inline-block;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0,0,0,.2);
    margin-right: 4px;
  }
  .photo-list img {
    width: 100%;
    height: 100%;
  }
  .photo-list-cover {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.6);
  }
  .photo-list:hover .photo-list-cover {
    display:block;
  }
  .photo-list-cover i {
    color:#fff;
    font-size:20px;
    cursor:pointer;
    margin:0 2px;
  }
</style>



// WEBPACK FOOTER //
// PhotoWall.vue?4ae98840
